import { T_srv, Tsrv, ifs, ts, tvs, vue } from '@/services';
import * as echarts from 'echarts';
import { I_cmd, T_cmd } from './command';
import { N_cGanttChart } from './types';

class Config {
  /**
   * 获取甘特图基础配置
   */
  static getBaseOption(): echarts.EChartsOption {
    return {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          const item = params.data;
          return `
            <div style="display:flex;justify-content:space-between">
              <span>名称:</span>
              <span>${item.name}</span>
            </div>
            <div style="display:flex;justify-content:space-between">
              <span>开始:</span>
              <span>${new Date(item.startTime).toLocaleString()}</span>
            </div>
            <div style="display:flex;justify-content:space-between">
              <span>结束:</span>
              <span>${new Date(item.endTime).toLocaleString()}</span>
            </div>
            <div style="display:flex;justify-content:space-between;margin-top:5px">
              <span>加工时间:</span>
              <span>${((item.endTime - item.startTime) / 3600000).toFixed(
                2
              )}小时</span>
            </div>
            <div style="display:flex;justify-content:space-between">
              <span>工艺:</span>
              <span>${item.process}</span>
            </div>
          `;
        },
        backgroundColor: 'rgba(50,50,50,0.7)',
        borderColor: '#333',
        textStyle: {
          color: '#fff'
        },
        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.5);'
      },
      // dataZoom: [
      //   {
      //     type: 'slider',
      //     xAxisIndex: 0,
      //     filterMode: 'weakFilter',
      //     height: 20,
      //     bottom: 0,
      //     start: 0,
      //     end: 26,
      //     handleIcon:
      //       'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      //     handleSize: '80%',
      //     showDetail: false
      //   },
      //   {
      //     type: 'inside',
      //     id: 'insideX',
      //     xAxisIndex: 0,
      //     filterMode: 'weakFilter',
      //     start: 0,
      //     end: 26,
      //     zoomOnMouseWheel: false,
      //     moveOnMouseMove: true
      //   },
      //   {
      //     type: 'slider',
      //     yAxisIndex: 0,
      //     zoomLock: true,
      //     width: 10,
      //     right: 10,
      //     top: 70,
      //     bottom: 20,
      //     start: 95,
      //     end: 100,
      //     handleSize: 0,
      //     showDetail: false
      //   },
      //   {
      //     type: 'inside',
      //     id: 'insideY',
      //     yAxisIndex: 0,
      //     start: 95,
      //     end: 100,
      //     zoomOnMouseWheel: false,
      //     moveOnMouseMove: true,
      //     moveOnMouseWheel: true
      //   }
      // ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'time',
        min: (value: { min: number }) => {
          const date = new Date(value.min);
          date.setHours(8, 0, 0, 0);
          return date.getTime();
        },
        max: (value: { max: number }) => {
          const date = new Date(value.max);
          date.setHours(15, 59, 59, 999);
          return date.getTime();
        },
        axisLabel: {
          formatter: (value: number) => {
            return this.formatTime(new Date(value));
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          interval: 0
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#f0f0f0'
          }
        }
      }
    };
  }

  /**
   * 格式化时间显示
   */
  private static formatTime(date: Date): string {
    return `${date.getHours()}:${date
      .getMinutes()
      .toString()
      .padStart(2, '0')}`;
  }

  /**
   * 获取系列配置
   */
  private static getOverlapAreas(items: N_cGanttChart.GanttItem[]): any[] {
    const areas: any[] = [];
    const intervals = items
      .map(item => ({
        start: item.startTime.getTime(),
        end: item.endTime.getTime()
      }))
      .sort((a, b) => a.start - b.start);

    for (let i = 1; i < intervals.length; i++) {
      if (intervals[i].start < intervals[i - 1].end) {
        areas.push([
          {
            xAxis: intervals[i].start,
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)'
            }
          },
          {
            xAxis: Math.min(intervals[i - 1].end, intervals[i].end)
          }
        ]);
      }
    }
    return areas;
  }

  static getSeriesOption(data: N_cGanttChart.GanttData): echarts.SeriesOption {
    return {
      type: 'custom',
      markArea: {
        silent: true,
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: this.getOverlapAreas(data.items)
      },
      renderItem: (params, api) => {
        const start = api.value(0) as number;
        const end = api.value(1) as number;
        const yIndex = api.value(2) as number;
        const coords = api.coord([start, yIndex]);

        return {
          type: 'group',
          children: [
            {
              type: 'rect',
              shape: {
                x: coords[0],
                y: coords[1] - 10,
                width: api.size([end - start, 0])[0],
                height: 20
              },
              style: {
                fill: '#1890ff'
              }
            },
            {
              type: 'text',
              style: {
                text: api.value(3) as string,
                fill: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
              },
              position: [
                coords[0] + api.size([end - start, 0])[0] / 2,
                coords[1]
              ]
            }
          ]
        };
      },
      data: data.items.map((item, index) => ({
        value: [
          item.startTime.getTime(),
          item.endTime.getTime(),
          index,
          item.name,
          item.process
        ],
        id: item.id,
        name: item.name,
        startTime: item.startTime,
        endTime: item.endTime,
        process: item.process
      }))
    };
  }
}

export { Config, I_cmd, N_cGanttChart, T_cmd, T_srv, Tsrv, ifs, ts, tvs, vue };
